<template>
  <div>
    <div class="list" v-loading="isLoading">
      <comment-item v-for="item in commentList" v-bind:comment="item" @delete="deleteComment"></comment-item>
    </div>
    <div style="text-align: center">
      <el-pagination :current-page="filterFrom.page_number" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.page_size" layout="sizes, prev, pager, next, jumper,total"
        :total="totalSize" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
    </div>
  </div>
</template>

<script>
  import API from '../../api'
  import CommentItem from '../common/comment-item.vue'

  var filterFrom = {
    page_number: 1,
    page_size: 10,
    target_type: 4
  }

  export default {
    components: {
      'comment-item': CommentItem
    },

    props: ['curId'],

    data: function () {
      return {
        isLoading: false,
        commentList: [],
        filterFrom,
        totalSize: 0
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.page_size = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.page_number = val
        this.fetchData()
      },
      fetchData: function () {
        this.isLoading = true
        this.filterFrom.target_id = this.curId
        API.commentList(this.filterFrom,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.commentList = data.list
            this.totalSize = data.total_size
          }
        )
      },
      deleteComment: function (comment) {
        var deletePar = {
          'id': comment.id
        }
        API.commentDelete(deletePar,
          (data) => {
            if (!data) return
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
          }
        )
      }
    }
  }

</script>

<style scoped>
  .list {
    margin: 0px 10px;
    min-height: 100px;
  }
</style>
